<html>

<head>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style>
		#input1,
		#input2 {
			border-radius: 20px;
		}

		#div1 {
			border: 2px black solid;
			background: skyblue;
		}

		#input-size {
			background: red;
			border-radius: 20px;
		}

		[v-cloak] {
			display: none;
		}

		.v-enter,
		.v-leave-to {
			opacity: 0;

			transform: rotateY(120deg);


		}

		.v-enter-active,
		.v-leave-active {
			transition: all 1s ease;
		}

		#app #kjh-div {
			margin: auto auto;
		}
	</style>
</head>

<body>



	<div id="app">

		<div id="kjh-div">
			<transition>
				<div v-cloak v-show="flag">
					<span class='badge'>李白 </span>
					<span id='input-size'>善良之人啊，你是</span><br><br>

				</div>
			</transition>
			<transition>
				<div v-cloak v-show="flag">
					<span class='badge'>李白 </span>
					<span id='input-size'>善良之人啊，你是</span><br><br>

				</div>
			</transition>
			<transition>
				<div v-cloak v-show="flag">
					<span class='badge'>李白 </span>
					<span id='input-size'>善良之人啊，你是</span><br><br>

				</div>
			</transition>
			<transition>
				<div v-cloak v-show="flag">
					<span class='badge'>李白 </span>
					<span id='input-size'>善良之人啊，你是</span><br><br>

				</div>
			</transition>
			<transition>
				<div v-cloak v-show="flag">
					<span class='badge'>李白 </span>
					<span id='input-size'>善良之人啊，你是</span><br><br>

				</div>
			</transition>


			<transition>
					<div v-cloak v-show="flag">
				<input type="text"  id="input1">
			</div>
			</transition>

		</div>









		<div class="form-group">

			<span class="glyphicon glyphicon-user"></span>
			<label for="">你的名字：</label>
			<transition>
					<div v-cloak v-show="flag">
				<input type="text" class="form-control" id="input1">
				</div>
			</transition>
			<span class="glyphicon glyphicon-thumbs-up"></span>
			<label for="">评论内容：</label>
			<input type="text" class="form-control" id="input2" @keyup.enter=aaa>
		</div>


		<transition>
		<div v-cloak v-show="flag">
		<div class="form-group">
			<button id="button1" class="btn btn-primary">发送信息</button>
		</div>
		</div>
		</transition>








	</div>









</body>

<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
	new Vue({

		el: "#app",
		data: {
			flag: false

		},
		methods:{
			aaa:function(){
				alert("Hello world");
			}
		},
		mounted() {

			this.flag = true;
		}
	})











</script>


</html>